<template>
  <div>
    <ul class="order-tabs">
      <li class="tab"
        v-for="item in tabs"
        :key="item.id"
        :class="{active: currentTab === item.component}"
        @click="switchOrder(item)"
      >{{ item.name }}</li>
    </ul>
    <keep-alive>
      <component :is="currentComponent" v-bind="compProps"></component>
    </keep-alive>
  </div>
</template>

<script>
import SearchResultAllByDefault from './SearchResultAllByDefault.vue'
import SearchResultAllByClick from './SearchResultAllByClick.vue'
import SearchResultAllByTime from './SearchResultAllByTime.vue'
import SearchResultAllByDanmu from './SearchResultAllByDanmu.vue'
export default {
  name: 'SearchResultAll',
  components: {
    SearchResultAllByDefault,
    SearchResultAllByClick,
    SearchResultAllByTime,
    SearchResultAllByDanmu
  },
  props: {
    keyword: {
      type: String
    }
  },
  data () {
    return {
      currentTab: 'Default',
      tabs: [
        { id: 't1', name: '默认排序', component: 'Default' },
        { id: 't2', name: '播放多', component: 'Click' },
        { id: 't3', name: '新发布', component: 'Time' },
        { id: 't4', name: '弹幕多', component: 'Danmu' }
      ]
    }
  },
  computed: {
    currentComponent () {
      return 'SearchResultAllBy' + this.currentTab
    },
    compProps () {
      return {
        keyword: this.keyword
      }
    }
  },
  watch: {
    keyword (newVal) {
      if (newVal) {
        this.currentTab = 'Default'
      }
    }
  },
  methods: {
    switchOrder (item) {
      this.currentTab = item.component
    }
  }
}
</script>

<style lang="scss">
  .sm-unit .keyword,
  .video-unit .keyword,
  .movies-unit .keyword{
    color: $theme-color;
    font-style: normal;
  }
</style>

<style lang="scss" scoped>
  .order-tabs {
    display: flex;
    height: 44px;
    padding: 0 20px;
    justify-content: space-between;
    background-color: #f9f9f9;
    .tab{
      display: inline-block;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      margin-top: 7px;
      color: $color-text-primary;
      &.active{
        color: $theme-color;
      }
    }
  }
</style>
